<template>
  <div class="common-body-page report-detail-page">
    <header class="main-header">
        <div>
          <!-- 标题 -->
          <div class="title">
            <router-link to='/' tag="p">{{$I18n.dashBoard}}<span>/</span></router-link>
            <router-link to='/accountList' tag="p">{{$I18n.account}}<span>/</span></router-link>
            <p class="black">{{$I18n.accountInfo}}</p>
          </div>
          <!-- 按钮 -->
          <div>
            <button class="btn" @click="saveAccount" v-if="!isEdit">{{$I18n.save}}</button>
            <button class="btn" @click="isEdit=false" v-else>{{$I18n.edit}}</button>
            <button class="cancel-btn" @click="cancelDialog=true">{{$I18n.cancel}}</button>
          </div>
        </div>
    </header>
    <section class="gc-body">
      <h3 class="title">{{$I18n.accountInfo}}</h3>
        <div class="body">
        <!-- 出险人信息 -->
        <div class="self-tab">{{$I18n.baseInfo}}</div>
        <el-form>
           <!-- 邮箱 -->
          <el-form-item  :label="$I18n.email" required :class="{'no-line': true}">
            <el-input v-model="accountData.email" :readonly="true" ></el-input>
            <i  class="fa fa-external-link" @click="paramsDialog=true"></i>
          </el-form-item>
            <!-- 站点 -->
          <el-form-item :label="$I18n.site" required :class="{'no-line': isEdit}">
            <el-select v-model="accountData.site" :readonly="isEdit">
              <el-option v-for="item in siteList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
          <!-- 使用类型 -->
          <el-form-item :label="$I18n.accountUseType" required :class="{'no-line': isEdit}">
            <el-select v-model="accountData.accountUseType" :readonly="isEdit">
              <el-option v-for="item in accountUseTypeList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
          <!-- 星级 -->
          <el-form-item :label="$I18n.star" required :class="{'no-line': isEdit}">
            <el-select v-model="accountData.star" :readonly="isEdit">
              <el-option v-for="item in starList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
          </el-select>
          </el-form-item>
          <!-- 账号状态 -->
          <el-form-item :label="$I18n.accountStatus" required :class="{'no-line': isEdit}">
            <el-select v-model="accountData.accountStatus" :readonly="isEdit">
              <el-option v-for="item in statusList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
          </el-select>
          </el-form-item>
         <el-form-item  :label="$I18n.browser" required :class="{'no-line': true}">
            <el-input v-model="accountData.browser" :readonly="true" ></el-input>
          </el-form-item>
        </el-form>

          <!-- 服务器信息 -->
        <div class="self-tab">{{$I18n.virtualInfo}}</div>
        <el-form>
           <!-- 虚拟机名称 -->
          <el-form-item  :label="$I18n.virtualName" required :class="{'no-line': true}">
            <el-input v-model="accountData.virtualName" :readonly="true"></el-input>
             <i  class="fa fa-external-link" @click="paramsVirtualDialog=true"></i>
          </el-form-item>
          <!-- 虚拟机IP -->
          <el-form-item  :label="$I18n.virtualLocalIp" :class="{'no-line': true}">
            <el-input v-model="accountData.virtualLocalIp" :readonly="true"></el-input>
          </el-form-item>
          <!-- 服务器 -->
          <el-form-item  :label="$I18n.serviceName" :class="{'no-line': true}">
            <el-input v-model="accountData.serviceName" :readonly="true"></el-input>
          </el-form-item>
          <!-- 服务器用户 -->
          <el-form-item  :label="$I18n.serviceUser" :class="{'no-line': true}">
            <el-input v-model="accountData.serviceUser" :readonly="true"></el-input>
          </el-form-item>
        </el-form>

        <!-- 操作信息 -->
        <div class="self-tab">{{$I18n.optionInfo}}</div>
        <el-form>
          <!-- 负责人 -->
          <el-form-item  :label="$I18n.chargeUserName" :class="{'no-line': isEdit}">
            <el-input v-model="accountData.chargeUserName" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 最近免评单日期 -->
          <el-form-item  :label="$I18n.recentlyNoCommentOrderDate" :class="{'no-line': isEdit}">
            <el-input v-model="accountData.recentlyNoCommentOrderDate" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 最近留评日期 -->
          <el-form-item  :label="$I18n.recentlyCommentOrderDate" :class="{'no-line': isEdit}">
            <el-input v-model="accountData.recentlyCommentOrderDate" :readonly="isEdit"></el-input>
          </el-form-item>
        </el-form>

         <!-- 虚拟卡信息 -->
        <div class="self-tab">{{$I18n.cardInfo}}</div>
        <el-form>
          <!-- 卡号 -->
          <el-form-item  :label="$I18n.visaCardNo" :class="{'no-line': true}">
            <el-input v-model="accountData.visaCardNo" :readonly="true"></el-input>
            <i  class="fa fa-external-link" @click="paramsCardDialog=true"></i>
          </el-form-item>
          <!-- 到期日期 -->
          <el-form-item  :label="$I18n.endDate" :class="{'no-line': true}">
            <el-input v-model="accountData.endDate" :readonly="true"></el-input>
          </el-form-item>
          <!-- 总金额 -->
          <el-form-item  :label="$I18n.totalAmount" :class="{'no-line': true}">
            <el-input v-model="accountData.totalAmount" :readonly="true"></el-input>
          </el-form-item>
          <!-- 已消费金额 -->
          <el-form-item  :label="$I18n.useAmount" :class="{'no-line': true}">
            <el-input v-model="accountData.useAmount" :readonly="true"></el-input>
          </el-form-item>
          <!-- 余额 -->
          <el-form-item  :label="$I18n.balanceAmount" :class="{'no-line': true}">
            <el-input v-model="accountData.balanceAmount" :readonly="true"></el-input>
          </el-form-item>
        </el-form>

        <!-- vps信息 -->
        <div class="self-tab">{{$I18n.vpsInfo}}</div>
        <el-form>
          <!-- vps -->
          <el-form-item  :label="$I18n.vpsIp"  :class="{'no-line': true}">
            <el-input v-model="accountData.vpsIp" :readonly="true"></el-input>
            <i  class="fa fa-external-link" @click="paramsVpsDialog=true"></i>
          </el-form-item>
          <!-- ssh root -->
          <el-form-item  :label="$I18n.sshUser" :class="{'no-line': true}">
            <el-input v-model="accountData.sshUser" :readonly="true"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item  :label="$I18n.sshPassword" :class="{'no-line': true}">
            <el-input v-model="accountData.sshPassword" :readonly="true"></el-input>
          </el-form-item>
        </el-form>


        <!-- 地址信息 -->
        <div class="self-tab">{{$I18n.addressInfo}}</div>
        <el-form>
          <!-- vps -->
          <el-form-item  :label="$I18n.name" required :class="{'no-line': true}">
            <el-input v-model="accountData.name" :readonly="true"></el-input>
            <i  class="fa fa-external-link" @click="paramsAddressDialog=true"></i>
          </el-form-item>
          <!-- ssh root -->
          <el-form-item  :label="$I18n.address" :class="{'no-line': true}">
            <el-input v-model="accountData.address" :readonly="true"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item  :label="$I18n.phone" :class="{'no-line': true}">
            <el-input v-model="accountData.phone" :readonly="true"></el-input>
          </el-form-item>
        </el-form>

      </div>
    </section>

    <!-- 邮箱弹框 -->
    <el-dialog :title="$I18n.email" :visible.sync="paramsDialog" custom-class="big-dialog">
      <!-- 有左右margin的放.body里面，跟表格100%宽度分开 -->
      <div class="body">
        <!-- 搜索 -->
        <Search ref="search" @search="search" :placeholder="$I18n.reportDeatilSearch"></Search>
        <!-- 分页 -->
        <Pagination :pageSize="10" @load="loadTableList"></Pagination>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table class="small-table" :data="emailDatalist" stripe  @row-click="confirmDiagEmail">
          <!-- 邮箱 -->
          <el-table-column prop="email" :label="$I18n.email"></el-table-column>
          <!-- 创建日期 -->
          <el-table-column prop="createdDate" :label="$I18n.createdDate"></el-table-column>
          <!-- 状态 -->
          <el-table-column prop="emailStatus" :label="$I18n.emailStatus"></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="paramsDialog=false">{{$I18n.cancel}}</button>
      </div>
      <!-- 表格 end -->
    </el-dialog>

    <!-- 虚拟机 -->
    <el-dialog :title="$I18n.virtual" :visible.sync="paramsVirtualDialog" custom-class="big-dialog">
      <!-- 有左右margin的放.body里面，跟表格100%宽度分开 -->
      <div class="body">
        <!-- 搜索 -->
        <Search ref="searchVirtual" @search="searchVirtual" :placeholder="$I18n.reportDeatilSearch"></Search>
        <!-- 分页 -->
        <Pagination :pageSize="10" @load="loadVirtualTableList"></Pagination>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table class="small-table" :data="virtualDatalist" stripe  @row-click="confirmDiagVirtual">
          <!-- 邮箱 -->
          <el-table-column prop="virtualName" :label="$I18n.virtualName"></el-table-column>
          <!-- 邮箱 -->
          <el-table-column prop="virtualLocalIp" :label="$I18n.virtualLocalIp"></el-table-column>
          <!-- 邮箱 -->
          <el-table-column prop="serviceName" :label="$I18n.serviceName"></el-table-column>
          <!-- 创建日期 -->
          <el-table-column prop="serviceUser" :label="$I18n.serviceUser"></el-table-column>
          <!-- 状态 -->
          <el-table-column prop="virtualStatus" :label="$I18n.virtualStatus"></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="paramsVirtualDialog=false">{{$I18n.cancel}}</button>
      </div>
      <!-- 表格 end -->
    </el-dialog>

    <!-- Vps -->
    <el-dialog :title="$I18n.vps" :visible.sync="paramsVpsDialog" custom-class="big-dialog">
      <!-- 有左右margin的放.body里面，跟表格100%宽度分开 -->
      <div class="body">
        <!-- 搜索 -->
        <Search ref="searchVps" @search="searchVps" :placeholder="$I18n.reportDeatilSearch"></Search>
        <!-- 分页 -->
        <Pagination :pageSize="10" @load="loadVpsTableList"></Pagination>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table class="small-table" :data="vpsDatalist" stripe  @row-click="confirmDiagVps">
          <!-- 邮箱 -->
          <el-table-column prop="vpsIp" :label="$I18n.vpsIp"></el-table-column>
          <!-- 创建日期 -->
          <el-table-column prop="createdDate" :label="$I18n.createdDate"></el-table-column>
           <!-- 开始日期 -->
          <el-table-column prop="startDate" :label="$I18n.startDate"></el-table-column>
           <!-- 结束日期 -->
          <el-table-column prop="endDate" :label="$I18n.endDate"></el-table-column>
          <!-- 状态 -->
          <el-table-column prop="vpsStatus" :label="$I18n.vpsStatus"></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="paramsVpsDialog=false">{{$I18n.cancel}}</button>
      </div>
      <!-- 表格 end -->
    </el-dialog>

     <!-- card信息 -->
    <el-dialog :title="$I18n.card" :visible.sync="paramsCardDialog" custom-class="big-dialog">
      <!-- 有左右margin的放.body里面，跟表格100%宽度分开 -->
      <div class="body">
        <!-- 搜索 -->
        <Search ref="searchCard" @search="searchCard" :placeholder="$I18n.reportDeatilSearch"></Search>
        <!-- 分页 -->
        <Pagination :pageSize="10" @load="loadCardTableList"></Pagination>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table class="small-table" :data="cardDatalist" stripe  @row-click="confirmDiagCard">
          <!-- 邮箱 -->
          <el-table-column prop="visaCardNo" :label="$I18n.visaCardNo"></el-table-column>
          <!-- 创建日期 -->
          <el-table-column prop="endDate" :label="$I18n.endDate"></el-table-column>
           <!-- 开始日期 -->
          <el-table-column prop="totalAmount" :label="$I18n.totalAmount"></el-table-column>
           <!-- 结束日期 -->
          <el-table-column prop="useAmount" :label="$I18n.useAmount"></el-table-column>
           <!-- 结束日期 -->
          <el-table-column prop="balanceAmount" :label="$I18n.balanceAmount"></el-table-column>
          <!-- 状态 -->
          <el-table-column prop="cardStatus" :label="$I18n.cardStatus"></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="paramsCardDialog=false">{{$I18n.cancel}}</button>
      </div>
      <!-- 表格 end -->
    </el-dialog>

     <!-- 地址 -->
    <el-dialog :title="$I18n.virtual" :visible.sync="paramsAddressDialog" custom-class="big-dialog">
      <!-- 有左右margin的放.body里面，跟表格100%宽度分开 -->
      <div class="body">
        <!-- 搜索 -->
        <Search ref="searchAddress" @search="searchAddress" :placeholder="$I18n.reportDeatilSearch"></Search>
        <!-- 分页 -->
        <Pagination :pageSize="10" @load="loadAddressTableList"></Pagination>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table class="small-table" :data="addressDatalist" stripe  @row-click="confirmDiagAddress">
          <!-- 邮箱 -->
          <el-table-column prop="name" :label="$I18n.name"></el-table-column>
          <!-- 邮箱 -->
          <el-table-column prop="phone" :label="$I18n.phone"></el-table-column>
          <!-- 邮箱 -->
          <el-table-column prop="address" :label="$I18n.address"></el-table-column>
          <!-- 创建日期 -->
          <el-table-column prop="country" :label="$I18n.country"></el-table-column>
          <!-- 状态 -->
          <el-table-column prop="city" :label="$I18n.city"></el-table-column>
          <el-table-column prop="addressStatus" :label="$I18n.addressStatus"></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="paramsAddressDialog=false">{{$I18n.cancel}}</button>
      </div>
      <!-- 表格 end -->
    </el-dialog>

    <!-- 取消弹框 -->
    <el-dialog :title="$I18n.hint" :visible.sync="cancelDialog" custom-class="hit-dialog">
      <p class="text">{{$I18n.confirmBack}}</p>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="$router.push('/accountList')">{{$I18n.ok}}</button>
        <button class="cancel-btn" @click="cancelDialog=false">{{$I18n.cancel}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Search from '@/components/common/search'
import Pagination from '@/components/common/pagination'
import INTERFACE from './interface'
import EventBus from '@/services/eventBus'

export default {
  components: {
    Search,
    Pagination
  },
  data() {
    return {
      accountId: this.$route.query.accountId,
      cancelDialog: false,
      paramsDialog: false,
      paramsVpsDialog: false,
      paramsCardDialog: false,
      paramsVirtualDialog: false,
      paramsAddressDialog: false,
      accountData: {},
      isEdit: false,
      tagsInfo: {},
      emailDatalist: [],
      vpsDatalist: [],
      cardDatalist: [],
      virtualDatalist: [],
      addressDatalist: [],
      siteList: [
        {codeKey: 'US', codeName: '美国'},
        {codeKey: 'JP', codeName: '日本'},
        {codeKey: 'FR', codeName: '法国'},
        {codeKey: 'CA', codeName: '加拿大'},
        {codeKey: 'UK', codeName: '英国'},
        {codeKey: 'IT', codeName: '意大利'},
        {codeKey: 'DE', codeName: '德国'},
        {codeKey: 'AU', codeName: '澳大利亚'},
        {codeKey: 'ES', codeName: '西班牙'},
        {codeKey: 'KR', codeName: '韩国'},
      ],
      accountUseTypeList: [
        {codeKey: 'WHITE', codeName: '白号'},
        {codeKey: 'BLACK', codeName: '黑号'},
        {codeKey: 'ADD_SHOPPING_TROLLEY', codeName: '加购号'},
      ],
      statusList: [
        {codeKey: 'NEW', codeName: '新开'},
        {codeKey: 'USEING', codeName: '使用中'},
        {codeKey: 'DISABLE', codeName: '封禁'}
      ],
      starList: [
        {codeKey: 'NEW', codeName: '新号'},
        {codeKey: 'ADD_SHOPPING_TROLLEY', codeName: '可加购'},
        {codeKey: 'REVIEWS', codeName: '可留评'},
        {codeKey: 'FEEDBACK', codeName: '可Feedback'},
        {codeKey: 'NO_REVIEWS', codeName: '可免评'},
        {codeKey: 'IMPORTANT', codeName: '重点'}
      ]
    }
  },
  created() {
    if (!this.accountId) return
    this.isEdit = true
    INTERFACE.queryAccountDetail({accountId: this.accountId}).then(res => {
      this.accountData = res.data
    })
  },
  methods: {
    saveAccount() {
      this.accountData.accountId = this.accountId;
      INTERFACE.saveAccount(this.accountData).then(res => {
        if (res.error !== 'SUCCESS') return
        window.Tips(res.message)
        this.$router.push('/accountList')
      })
    },
    // 开始搜索,table组件会监听tagsInfo,只需改变即可
    search(obj = {}) {
      Object.assign(this.tagsInfo, obj)
      INTERFACE.queryEmailList(this.tagsInfo).then(res => {
        this.emailDatalist = res.data.data
        // 通知分页组件总共条数
        EventBus.$emit('pageData', {totalPage: res.data.totalPage, currentPage: res.data.currentPage})
      })
    },
    // 改变页码，重新加载表格数据
    loadTableList(page) {
      //  watch监听不到Object.assign，故用$set
      this.$set(this.tagsInfo, 'pageSize', page.pageSize)
      this.$set(this.tagsInfo, 'currentPage', page.currentPage)
      this.search()
    },
    // 改变页码，重新加载表格数据
    loadVpsTableList(page) {
      //  watch监听不到Object.assign，故用$set
      this.$set(this.tagsInfo, 'pageSize', page.pageSize)
      this.$set(this.tagsInfo, 'currentPage', page.currentPage)
      this.searchVps();
    },
    // 开始搜索,table组件会监听tagsInfo,只需改变即可
    searchVps(obj = {}) {
      Object.assign(this.tagsInfo, obj)
      INTERFACE.queryVpsList(this.tagsInfo).then(res => {
        this.vpsDatalist = res.data.data
        // 通知分页组件总共条数
        EventBus.$emit('pageData', {totalPage: res.data.totalPage, currentPage: res.data.currentPage})
      })
    },
    // 改变页码，重新加载表格数据
    loadCardTableList(page) {
      //  watch监听不到Object.assign，故用$set
      this.$set(this.tagsInfo, 'pageSize', page.pageSize)
      this.$set(this.tagsInfo, 'currentPage', page.currentPage)
      this.searchCard();
    },
    // 开始搜索,table组件会监听tagsInfo,只需改变即可
    searchCard(obj = {}) {
      Object.assign(this.tagsInfo, obj)
      INTERFACE.queryCardList(this.tagsInfo).then(res => {
        this.cardDatalist = res.data.data
        // 通知分页组件总共条数
        EventBus.$emit('pageData', {totalPage: res.data.totalPage, currentPage: res.data.currentPage})
      })
    },
    // 改变页码，重新加载表格数据
    loadVirtualTableList(page) {
      //  watch监听不到Object.assign，故用$set
      this.$set(this.tagsInfo, 'pageSize', page.pageSize)
      this.$set(this.tagsInfo, 'currentPage', page.currentPage)
      this.searchVirtual();
    },
    // 开始搜索,table组件会监听tagsInfo,只需改变即可
    searchVirtual(obj = {}) {
      Object.assign(this.tagsInfo, obj)
      INTERFACE.queryVirtualList(this.tagsInfo).then(res => {
        this.virtualDatalist = res.data.data
        // 通知分页组件总共条数
        EventBus.$emit('pageData', {totalPage: res.data.totalPage, currentPage: res.data.currentPage})
      })
    },
    // 改变页码，重新加载表格数据
    loadAddressTableList(page) {
      //  watch监听不到Object.assign，故用$set
      this.$set(this.tagsInfo, 'pageSize', page.pageSize)
      this.$set(this.tagsInfo, 'currentPage', page.currentPage)
      this.searchAddress();
    },
    // 开始搜索,table组件会监听tagsInfo,只需改变即可
    searchAddress(obj = {}) {
      Object.assign(this.tagsInfo, obj)
      INTERFACE.queryAddressList(this.tagsInfo).then(res => {
        this.addressDatalist = res.data.data
        // 通知分页组件总共条数
        EventBus.$emit('pageData', {totalPage: res.data.totalPage, currentPage: res.data.currentPage})
      })
    },
    confirmDiagEmail(row) {
      this.$set(this.accountData, 'email', row.email)
      this.$set(this.accountData, 'emailId', row.emailId)
      this.paramsDialog = false
    },
    confirmDiagVps(row) {
      this.$set(this.accountData, 'vpsId', row.vpsId)
      this.$set(this.accountData, 'vpsIp', row.vpsIp)
      this.$set(this.accountData, 'sshUser', row.sshUser)
      this.$set(this.accountData, 'sshPassword', row.sshPassword)
      this.paramsVpsDialog = false
    },
    confirmDiagCard(row) {
      this.$set(this.accountData, 'visaCardId', row.visaCardId)
      this.$set(this.accountData, 'visaCardNo', row.visaCardNo)
      this.$set(this.accountData, 'endDate', row.endDate)
      this.$set(this.accountData, 'totalAmount', row.totalAmount)
      this.$set(this.accountData, 'useAmount', row.useAmount)
      this.$set(this.accountData, 'balanceAmount', row.balanceAmount)
      this.paramsCardDialog = false
    },
    confirmDiagVirtual(row) {
      this.$set(this.accountData, 'virtualId', row.virtualId)
      this.$set(this.accountData, 'virtualName', row.virtualName)
      this.$set(this.accountData, 'virtualLocalIp', row.virtualLocalIp)
      this.$set(this.accountData, 'serviceName', row.serviceName)
      this.$set(this.accountData, 'serviceUser', row.serviceUser)
      this.$set(this.accountData, 'virtualUser', row.virtualUser)
      this.paramsVirtualDialog = false
    },
    confirmDiagAddress(row) {
      this.$set(this.accountData, 'addressId', row.addressId)
      this.$set(this.accountData, 'name', row.name)
      this.$set(this.accountData, 'phone', row.phone)
      this.$set(this.accountData, 'country', row.country)
      this.$set(this.accountData, 'address', row.address)
      this.$set(this.accountData, 'city', row.city)
      this.paramsAddressDialog = false
    },
  }
}
</script>

<style lang="stylus">
  .fa-external-link
    position absolute
    color #6a8ebf
    cursor pointer
    top 50%
    right -18px
    transform translateY(-50%)
  .search-input
    width 100%
  .pagination-page
    justify-content flex-end
    margin-top 5px  
</style>